'use client';

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Form, Input, Button, message, Divider } from 'antd';
import { motion } from 'framer-motion';
import {
    PhoneOutlined,
    MailOutlined,
    EnvironmentOutlined,
    ClockCircleOutlined,
    SendOutlined
} from '@ant-design/icons';

const { TextArea } = Input;

interface FormData {
    name: string;
    email: string;
    phone?: string;
    subject: string;
    message: string;
}

const ContactPage: React.FC = () => {
    const { t } = useTranslation();
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    const onFinish = async (values: FormData) => {
        setLoading(true);
        try {
            // Simulate API call
            await new Promise(resolve => setTimeout(resolve, 1000));

            // Handle form submission (in a real app, this would be an API call)
            console.log('Form submitted:', values);

            message.success(t('contact.form.submitSuccess'));
            form.resetFields();
        } catch (error) {
            console.error('Form submission error:', error);
            message.error(t('contact.form.submitError'));
        } finally {
            setLoading(false);
        }
    };

    // Animation variants
    const fadeInUp = {
        hidden: { opacity: 0, y: 20 },
        visible: {
            opacity: 1,
            y: 0,
            transition: { duration: 0.6 }
        }
    };

    return (
        <div className="min-h-screen">
            {/* Hero Section */}
            <section className="py-20 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
                <div className="container mx-auto px-4 md:px-8">
                    <div className="max-w-3xl mx-auto text-center">
                        <motion.h1
                            className="text-4xl md:text-5xl font-bold mb-6"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.6 }}
                        >
                            {t('contact.title')}
                        </motion.h1>
                        <motion.div
                            className="w-24 h-1 bg-white mx-auto"
                            initial={{ width: 0 }}
                            animate={{ width: 96 }}
                            transition={{ duration: 0.8, delay: 0.4 }}
                        />
                    </div>
                </div>
            </section>

            {/* Contact Section */}
            <section className="py-16 bg-white">
                <div className="container mx-auto px-4 md:px-8">
                    <div className="flex flex-col md:flex-row gap-8">
                        {/* Contact Form */}
                        <motion.div
                            className="md:w-7/12 bg-white p-8 rounded-lg shadow-md"
                            initial="hidden"
                            animate="visible"
                            variants={fadeInUp}
                        >
                            <h2 className="text-2xl font-bold mb-6">{t('contact.form.name')}</h2>
                            <Form
                                form={form}
                                layout="vertical"
                                onFinish={onFinish}
                                autoComplete="off"
                            >
                                <Form.Item
                                    name="name"
                                    label={t('contact.form.name')}
                                    rules={[{ required: true, message: t('contact.form.nameRequired') }]}
                                >
                                    <Input placeholder={t('contact.form.namePlaceholder')} />
                                </Form.Item>

                                <Form.Item
                                    name="email"
                                    label={t('contact.form.email')}
                                    rules={[
                                        { required: true, message: t('contact.form.emailRequired') },
                                        { type: 'email', message: t('contact.form.emailInvalid') }
                                    ]}
                                >
                                    <Input placeholder={t('contact.form.emailPlaceholder')} />
                                </Form.Item>

                                <Form.Item
                                    name="phone"
                                    label={t('contact.form.phone')}
                                >
                                    <Input placeholder={t('contact.form.phonePlaceholder')} />
                                </Form.Item>

                                <Form.Item
                                    name="subject"
                                    label={t('contact.form.subject')}
                                    rules={[{ required: true, message: t('contact.form.subjectRequired') }]}
                                >
                                    <Input placeholder={t('contact.form.subjectPlaceholder')} />
                                </Form.Item>

                                <Form.Item
                                    name="message"
                                    label={t('contact.form.message')}
                                    rules={[{ required: true, message: t('contact.form.messageRequired') }]}
                                >
                                    <TextArea
                                        rows={4}
                                        placeholder={t('contact.form.messagePlaceholder')}
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Button
                                        type="primary"
                                        htmlType="submit"
                                        loading={loading}
                                        icon={<SendOutlined />}
                                        className="bg-blue-600 hover:bg-blue-700"
                                    >
                                        {t('contact.form.submit')}
                                    </Button>
                                </Form.Item>

                            </Form>
                        </motion.div>

                        {/* Contact Info */}
                        <motion.div
                            className="md:w-5/12 bg-gray-50 p-8 rounded-lg shadow-md"
                            initial="hidden"
                            animate="visible"
                            variants={fadeInUp}
                        >
                            <h2 className="text-2xl font-bold mb-6">{t('contact.info.title')}</h2>

                            <div className="space-y-6">
                                <div className="flex items-start">
                                    <EnvironmentOutlined className="text-blue-500 text-xl mr-4 mt-1" />
                                    <div>
                                        <h3 className="font-semibold text-lg">{t('contact.info.address.title')}</h3>
                                        <p className="text-gray-600">{t('contact.info.address.value')}</p>
                                    </div>
                                </div>

                                <Divider className="my-4" />

                                <div className="flex items-start">
                                    <PhoneOutlined className="text-blue-500 text-xl mr-4 mt-1" />
                                    <div>
                                        <h3 className="font-semibold text-lg">{t('contact.info.phone.title')}</h3>
                                        <p className="text-gray-600">{t('contact.info.phone.value')}</p>
                                    </div>
                                </div>

                                <Divider className="my-4" />

                                <div className="flex items-start">
                                    <MailOutlined className="text-blue-500 text-xl mr-4 mt-1" />
                                    <div>
                                        <h3 className="font-semibold text-lg">{t('contact.info.email.title')}</h3>
                                        <p className="text-gray-600">{t('contact.info.email.value')}</p>
                                    </div>
                                </div>

                                <Divider className="my-4" />

                                <div className="flex items-start">
                                    <ClockCircleOutlined className="text-blue-500 text-xl mr-4 mt-1" />
                                    <div>
                                        <h3 className="font-semibold text-lg">{t('contact.info.hours.title')}</h3>
                                        <p className="text-gray-600">{t('contact.info.hours.value')}</p>
                                    </div>
                                </div>
                            </div>

                            {/* Map Placeholder */}
                            <div className="mt-8 rounded-lg overflow-hidden h-48 bg-gray-200 flex items-center justify-center">
                                <p className="text-gray-500">Map will be displayed here</p>
                            </div>
                        </motion.div>
                    </div>
                </div>
            </section>
        </div>
    );
};

export default ContactPage; 